// webpack.config.js是webpack的默认配置文件
const path = require('path') // path属于node的一个模块
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  mode: 'develepment',//develepment表示webpack不会把代码压缩，production表示压缩代码
  entry: {
    main:'./src/index.js'//以这个路径的下的文件进行打包
  },
  // 使用loader之前必须先安装该loader
  module: {
    rules: [{
      test: /\.(jpg|png|gif|eot|ttf|svg|woff)$/,//webpack不认识的文件格式这里配置，然后告诉webpack用什么loader来处理打包这里不认识的文件
      use: {
        loader: 'file-loader',//告诉webpack用file-loader来处理打包.jpg.png.gif格式的文件
        options: {
          //placeholder占位符，可以去查看webpack官网
          name: '[name]_[hash].[ext]',//打包出来的文件名保留原先的名字后，再加上哈希值在加上ext后缀。
          outputPath:'images1/'//将这些jpg|png|gif文件打包到images1文件夹下
        }
      },
    },
      //file-loader之外还有url-loader,会将图片直接打包进js文件里面，以base64形式的文件存在，打开页面的时候不需要再去请求图片，可以直接显示，相当合适优化。
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',//告诉webpack用file-loader来处理打包.jpg格式的文件
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit:2048,//如果图片超过2048kb的时候才去打包图片成base64到js里面，limit的属性值随便项目需求设置。
          }
        }

        },
    {
      test: /\.vue$/,
      use: {
        loader: 'vue-loader'//告诉webpack用file-loader来处理打包.jpg格式的文件
      }
      },
      {
        test: /\.css$/,
        use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2,//当js文件或者scss文件import引入scss文件时，都需要先去执行以下两个loader
                modules:true,//样式模块管理
              }
            },
            'css-loader',
            'scss-loader',
            'postcss-loader'
        ]//style-loader，css-loader两个配合使用,css-loader会自动每个相互引用的css文件的关系，然后style-loader会把样式挂载上去；另外还有scss-loader(看webpack安装);;;postcss-loader需要创建一个postcss.config.js文件，去这里面配置相关插件,可以用来配置css自动配置产商前缀，例如-webkit-transfrom:rotate(0deg)
      }],
    plugins: [
      new HtmlWebpackPlugin({
      //plugin 可以webpack运行到某个时刻的时候，帮我们做一些事情（例如打包结束的时候去帮我们干某件事）
      //插件html-webpack-plugins
      //该插件会自动帮我们在打包结束之后，把index.html文件放到dist文件夹，但是里面会缺少<div id='root'></div>标签，所以在配置一下temelate属性，意思就是把src目录下你自己写好的index.html（这个是自己写的，已经含有<div id='root'></div>标签）来放到dist文件夹里面，
      template:'src/index.html'
      }),
      //每次打包之前先帮我们移除dist目录，
      new CleanWebpackPlugin(['dist'])
    ],
    output: {
      filename: 'bundle.js',//打包成这个文件
      path: path.resolve(__dirname,'dist')//__dirname是指当前根目录下的路径 ，新打包的出来的文件会放在这个文件夹下面
    }
  }
}
